var app = {
    zindex: 0,
    offsetT:0,
    offsetL:0,
    init: function () {
        $("#add").click(app.add);
        $("#del").click(app.del);
        $("#save").click(app.save);
        app.selectable($("nav"), false);
        app.enableDrag();
        app.drawLines();
    },
	// the save function.  Do we want to save to a db or local html5 storage?
    save: function () {
    },
	// removes all scrum notes
    del: function () {
        if (confirm("Are you sure you want to delete all the scrum notes?")) {
            $("#content").empty();
            app.zindex = 0
        }
    },
	
	// adds a new scrum note
    add: function () {
        var note = $('<article class="yellow"><header><div class=tfsText></div><ul class=tools><li><a href=# class=tfsNumber title="TFS number"><span>edit TFS</span></a></li><li><a href=#data class=editItem title="edit TFS Item"><span>edit TFS Item</span></a></li><li><a href=# class=close title="close note"><span>close</span></a></li></ul></header><textarea maxlength=160>notes</textarea></article>');
		
		// apply click events to the elements in the scrum note
		note.find("li:nth-child(1)").children("a").click(app.associateTFS);
		note.find("li:nth-child(2)").children("a").click(app.editItem);
		note.find("li:nth-child(3)").children("a").click(app.close);
        $("#content").prepend(note);
            $(".editItem").fancybox({
            	'width':   "600px"
            });
    },
    addWithData: function (tfsNumber, tfsDescription, section) {
    
    
	    var line1 = canvas.width * (1/3);
		var line2 = canvas.width * (2/3);
		var line3 = canvas.width * (3/3);
    
    
    	var left = ""
    
    	if(section === "proposed")
    		left = line1;
    	if(section === "active")
    		left = line2;
    	if(section === "fixed")
    		left = line3;
    		
    
        var note = $('<article class="yellow" style="z-index: 5; left: '+ left + 'px; top: 86px; position: absolute;"><header><div class=tfsText>' + tfsNumber + '</div><ul class=tools><li><a href=# class=tfsNumber title="TFS number"><span>edit TFS</span></a></li><li><a href=# class=editItem title="edit TFS Item"><span>edit TFS Item</span></a></li><li><a href=# class=close title="close note"><span>close</span></a></li></ul></header><textarea maxlength=160>' + tfsDescription + '</textarea></article>');
		
		// apply click events to the elements in the scrum note
		note.find("li:nth-child(1)").children("a").click(app.associateTFS);
		note.find("li:nth-child(2)").children("a").click(app.editItem);
		note.find("li:nth-child(3)").children("a").click(app.close);
        $("#content").prepend(note);
    },
    
	// Add's the TFS number to the top of the scrum note
	associateTFS: function() {
		var tfsNum = prompt("Enter in a TFS number", null);
		$(this).parent().parent().parent().find('div.tfsText').html(tfsNum);
		
	},
	// removes the scrum note
    close: function () {
        $(this).parent().parent().parent().parent().remove();
        return false
    },
    drawLines: function () {
    	canvas = document.getElementById("myCanvas");
        context = canvas.getContext("2d");
        
        context.canvas.width  = window.innerWidth;
	  	context.canvas.height = window.innerHeight;
        
        
        context.beginPath();
		
		rectX = canvas.width / 2 - 50;
        rectY = canvas.height / 2 - 25;
		
		var line1 = canvas.width * (1/3);
		var line2 = canvas.width * (2/3);
		var line3 = canvas.width * (3/3);
    
        context.font = "18pt Calibri";
        context.fillStyle = "black";
		
			
		// draw the colummns					
		context.moveTo(0, 35);
		context.lineTo(canvas.width, 35);
		context.fillText("Proposed", 0+ 10, 60);
		
		context.moveTo(line1, 35);
		context.lineTo(line1, canvas.height );
		context.fillText("Active", line1 + 10, 60);
		
		context.moveTo(line2, 35);
		context.lineTo(line2, canvas.height );
		context.fillText("Fixed", line2+ 10, 60);
		
		context.stroke();

    },
    editItem: function() {
    	$.fancybox(
		'<div id="data">		<table border=0 cellpadding=0 cellspacing=10> 					<colgroup> 						<col width="150px"> 						<col> 					</colgroup> 						<tbody> 							<tr valign="top"> 								<td align="right"> <label for="tfstitle"> Title:</label> </td> <td> <input type="text" id="tfstitle" /> </td> 							</tr> 							 							<tr valign="top"> 								<td align="right"> <label for="tfsHoursWorked"> Hours Worked:</label> </td> <td> <input type="text" id="tfsHoursWorked" /> </td> 							</tr> 							 							<tr valign="top"> 								<td align="right"> <label for="tfsDescription"> Description:</label> </td> <td> <input type="text" id="tfsDescription" /> </td> 							</tr> 						</tbody> 					</table> 					<input type="button" value="Save" onclick="javascript:$.fancybox.close()" /> 						 			</div>',
		{
        		'autoDimensions'	: false,
			'width'         		: 350,
			'height'        		: '650px',
			'transitionIn'		: 'none',
			'transitionOut'		: 'none'
		}
	);
    },
    enableDrag: function () {
        var b = $(document),
            a = function (d) {
                if (b.data("mouseMove")) {
                    var c = b.data("target");
                    c.css("left", parseInt(c.css("left"), 10) + d.pageX - b.data("x")).css("top", parseInt(c.css("top"), 10) + d.pageY - b.data("y"));
                    b.data("x", d.pageX).data("y", d.pageY)
                }
            };
        b.mousedown(function (f) {
            var d = f.target.tagName.toLowerCase(),
                c = $(f.target).parent();
            if (d == "textarea") {
                $(f.target).parent().css("z-index", ++app.zindex)
            } else {
                if (d == "header") {
                    c.addClass("drag");
                    c.css("z-index", ++app.zindex);
                    if (c.css("position") != "absolute") {
                        c.css("left", c.offset().left).css("top", c.offset().top).css("position", "absolute")
                    }
                    b.data("mouseMove", true).data("x", f.pageX).data("y", f.pageY).data("target", c);
                    app.selectable($("article"), false)
					f.offsetL = c.offset().left;
					$(this).offsetL = c.offset().left;
                }
            }
        });
        b.mouseup(function (f) {
            if (b.data("mouseMove")) {
                b.data("target").removeClass("drag");
                b.data("mouseMove", false).data("target", null);
                app.selectable($("article"), true)
                app.getSection(f);
            }
        });
        b.mousemove(a)
    },
    getSection: function(f) {
    
    	var lvalue = $(f.target).offset().left;
    	
    	
    	var line1 = canvas.width * (1/4);
		var line2 = canvas.width * (2/4);
		var line3 = canvas.width * (3/4);
    	
    	
    	if(lvalue < line1)
    		return(1);
    	else if(lvalue < line2)
    		return(2);
       	else if(lvalue < line3)
    		return(3);
       	else if(lvalue > line3)
    		return(4);    	
    	
    	
    },
    selectable: function (a, b) {
        if (!a) {
            return
        }
        a.unselectable = b ? "off" : "on";
        a.onselectstart = function () {
            return b
        };
        a.css("-webkit-user-select", b ? "" : "none");
        a.css("-moz-user-select", b ? "" : "none")
    }	
};
$(document).ready(function () {
    app.init();
});